<template>
	<view class="container">
		<view class="search">
			<u-search 
			:detailAction="false" 
			bgColor="#F6F7FB"
			style="flex: 1;"
			v-model="name"
			placeholder="请输入商品名称" 
			:showAction="false"></u-search>
			<text @click="dateilto(1)">搜索</text>
		</view>
		<view class="sear__tabber">
			<view class="sear_list">
				<view class="sear_list_item">
					<text :class='(index==0)?"detail_guanggao_text1 border-red":"detail_guanggao_text1"'
						@tap="changeSear(0)">综合</text>
				</view>
				<view class="sear_list_item">
					<text :class='(index==1)?"detail_guanggao_text1 border-red":"detail_guanggao_text1"'
						@tap="changeSear(1)">销量</text>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/shangxia.png" mode=""></image>
				</view>
				<view class="sear_list_item">
					<text :class='(index==2)?"detail_guanggao_text1 border-red":"detail_guanggao_text1"'
						@tap="changeSear(2)">价格</text>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/shangxia.png" mode=""></image>
				</view>
			</view>
			<view class="sear_zong">
				<image @tap="changeType" :src="type==1?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/zongxiang.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/hengxiang.png'"/>
			</view>
		</view>
		<view class="body_container">
			<view class="sear_body_container" v-if="type==2">
				<view class="sear_body">
					<view class="body_bottom_2" v-for="(item,index) in goodslist" :key="index" @tap="jump(item.goods_id)">
						<image :src="item.goods_img" mode=""></image>
						<view class="body_bottom_2_right">
							<text class="u-line-1">{{item.goods_name}}</text>
							<view class="goods_price">￥<text>{{item.goods_price}}</text></view>
							<view>
								<text class="bot_bot_three">已售：{{item.sales_sum}}</text>
							</view>
						</view>
						<image @tap.stop='addcart(item.goods_id)' src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/add.png" v-if="false" class="bot_img"/>
					</view>
				</view>
			</view>
			<view class="body_flex_container" v-else>
				<view class="body_5" v-for="(item,index) in goodslist" :key="index" @tap="jump(item.goods_id)">
					<image :src="item.goods_img" />
					<text class="body_5_text u-line-1">{{item.goods_name}}</text>
					<view class="bot_5_one">
						<text>￥{{item.goods_price}}</text>
						<text v-if="item.level_name" class="level">{{item.level_name}}</text>
					</view>
					<text class="bot_5_two" v-if="false">￥{{item.market_price}}</text>
					<image @tap.stop='addcart(item.goods_id)' src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/cort.png" v-if="false" class="body_abs"/>
				</view>
			</view>
			<u-loadmore :status="hasMore?'loading':'nomore'" />
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				// #ifdef VUE3
				column:ref(2),
				// #endif
				// #ifdef VUE2
				column: 2,
				// #endif
				index: 0,
				page: 1,
				type:1,
				goods_type:0,
				is_coupon:0,
				order: 'all',
				sort: 'asc',
				name: '',
				goodslist: [],
				hasMore:true,
				bottom:0
			}
		},
		onLoad(option) {
			_this=this
			this.name = option.name
			this.goods_type = option.goods_type
			this.is_coupon = option.is_coupon
			this.getgoodslist()
		},
		methods: {
			//路由跳转
			jump(id) {
				if (this.user_id == 0){
					this.$u.route({
						url: 'pages/auth/login'
					})
				}else{
					this.$u.route({
						url:'/pages/cart/show',
						params: {
							id
						}
					})
				}
			},
			//搜索
			dateilto() {
				if(this.name==''){
					this.$u.toast('请输入搜索内容')
					return
				}
				this.page=1
				this.goodslist=[]
				this.getgoodslist()
			},
			//加入购物车
			async addcart(id) {
				const params = {
					goods_id: id,
					item_id: 0,
					goods_num: 1
				}
				const data = await AddCart(params)
				if (data.code == 200) {
					this.$u.toast(data.msg)
				} else {
					this.$u.toast(data.msg)
				}
			},
			changeSear(index){
				if(this.index==index){
					return
				}
				this.index=index
				switch(index)
				{
				    case 0:
					this.order='all'
					this.sort='asc'
				        break;
				    case 1:
					this.order='sales_sum'
					this.sort='asc'
				        break;
				    case 2:
					this.order='goods_price'
					this.sort='asc'
				        break;
				}
				this.page=1
				this.goodslist=[]
				this.getgoodslist()
			},
			changeType(){
				this.type=this.type==1?2:1
			},
			//请求搜索数据
			async getgoodslist() {
				const params = {
					pageIndex: this.page,
					pageSize: 20,
					keyword: this.name || '',
					order: this.order,
					sort: this.sort,
					goods_type: this.goods_type || 0,
					is_coupon: this.is_coupon || 0
				}
				const data = await _this.$post('api/SubSearch',params)
				this.goodslist.push(...data.data.goods)
				this.hasMore=data.data.goods.length>=20
			},
			//跳转至搜索
			tosearch() {
				this.$u.route('pages/sort/search')
			},
			//触底事件
			onReachBottom() {
				//重新请求数据，带上分页的数据
				if (this.hasMore) {
					this.page++
					// console.log(this.page);
					this.getgoodslist()
				}
			},
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.container{
		height: 100%;
		.search{
			height: 90rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			text {
				font-size: 24rpx;
				color: #525252;
				margin-left: 20rpx;
			}
		}
		.sear__tabber {
			display: flex;
			align-items: center;
			height: 60rpx;
			.sear_list {
				flex: 1;
				display: flex;
				justify-content: space-around;
				.sear_list_item {
					image {
						width: 15rpx;
						height: 19rpx;
					}
					.detail_guanggao_text1 {
						font-size: 26rpx;
						color: #525252;
						padding: 10rpx 0;
					}
					.border-red {
						color: $theme-color;
						border-bottom: 2px solid $theme-color;
					}
				}
			}
			.sear_zong {
				padding: 0 30rpx;
				border-left: 1px solid #525252;
				display: flex;
				align-items: center;
				image {
					width: 27rpx;
					height: 27rpx;
				}
			}
		}
		.body_container{
			padding: 20rpx 20rpx 0 20rpx;
			.sear_body_container{
				.sear_body {
					.body_bottom_2 {
						display: flex;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						padding: 15rpx;
						position: relative;
						box-shadow: $global-shade;
						image {
							width: 170rpx;
							height: 170rpx;
							border-radius: 10rpx;
						}
						.body_bottom_2_right{
							flex: 1; 
							display: flex; 
							flex-direction: column;
							justify-content: space-around;
							margin-left: 20rpx;
							.u-line-1{
								font-size: 28rpx; 
								color: #151517;
							}
							.goods_price{
								color: $theme-color; 
								text{
									font-size: 30rpx;
								}
							}
							.bot_bot_three {
								color: #888;
							}
						}
						.bot_img {
							position: absolute;
							right: 20rpx;
							bottom: 20rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
			.body_flex_container{
				display: flex;
				flex-wrap: wrap;
			}
		}
	}

	.body_5 {
		width: 49%;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		/* height: 474rpx; */
		background: #fff;
		// -webkit-transition: all . 2s linear;
		/*渐变效果*/
		// transition: all . 2 s linear;
		box-shadow: $global-shade;
		border-radius: 15px;
		overflow: hidden;
		position: relative;
		&:nth-child(2n+1){
			margin-right: 2%;
		}
		image {
			height: 274rpx;
			width: 100%;
		}
		.body_5_text {
			font-size: 28rpx;
			margin: 10rpx 0;
			padding: 0 10rpx;
		}
		.body_abs {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			width: 48rpx; 
			height: 48rpx;
		}
	}
	.bot_5_one {
		font-size: 30rpx;
		color:$theme-color;
		margin: 10rpx 10rpx 20rpx 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.level{
			font-size: 26rpx;
			border: 2rpx solid $theme-color;
			padding: 0 20rpx;
			border-radius: 10rpx;
		}
	}
	.bot_5_two {
		color: #BCBCBC;
		font-size: 22rpx;
		text-decoration: line-through;
		margin: 0 0 10rpx 10rpx;
	}

	

	.body_flex {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.index_text2 {
		margin-left: 300rpx;
		font-size: 26rpx;
		color: #525252;
		text-align: center;
	}
</style>
